<!--
 * @Descripttion: 
 * @version: 
 * @Author: sueRimn
 * @Date: 2021-02-02 16:04:29
 * @LastEditors: sueRimn
 * @LastEditTime: 2021-02-03 15:18:22
-->
<template>
  <div>
    <!-- <el-table
      :data="tableData"
      :span-method="arraySpanMethod"
      border
      style="width: 100%"
    >
      <el-table-column prop="id" label="ID" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="amount1" sortable label="数值 1">
      </el-table-column>
      <el-table-column prop="amount2" sortable label="数值 2">
      </el-table-column>
      <el-table-column prop="amount3" sortable label="数值 3">
      </el-table-column>
    </el-table> -->

    <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px"
      :header-row-class-name="tableRowClassName"
    >
      <el-table-column prop="id" label="ID" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="amount1" label="数值 1（元）"> </el-table-column>
      <el-table-column prop="amount2" label="数值 2（元）"> </el-table-column>
      <el-table-column prop="amount3" label="数值 3（元）"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="small"
            type="primary"
            plain
            @click="clickHandler(scope.row)"
            >绑定</el-button
          >
        </template></el-table-column
      ></el-table
    >
  </div>
</template>

      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: "12987122",
          name: "王小虎",
          amount1: "23422-",
          amount2: "3.2",
          amount3: 10,
        },
        {
          id: "12987122",
          name: "王小虎",
          amount1: "16522--",
          amount2: "4.43",
          amount3: 12,
        },
        {
          id: "12987124",
          name: "王小虎",
          amount1: "32444-",
          amount2: "1.9",
          amount3: 9,
        },
        {
          id: "12987124",
          name: "王小虎",
          amount1: "32444--",
          amount2: "1.9",
          amount3: 9,
        },
        {
          id: "12987126",
          name: "王小虎",
          amount1: "62166-",
          amount2: "2.2",
          amount3: 17,
        },
        {
          id: "12987125",
          name: "王小虎",
          amount1: "62155-",
          amount2: "2.2",
          amount3: 17,
        },
        {
          id: "12987125",
          name: "王小虎",
          amount1: "53955--",
          amount2: "4.1",
          amount3: 15,
        },
      ],
      newTableData: [],
      rowCount: [],
    };
  },
  mounted() {
    let id,
      arr = [],
      countArr = [];
    for (let index = 0; index < this.tableData.length; index++) {
      let count = 0;
      if (index === 0) {
        id = this.tableData[index].id;
      } else {
        arr = this.newTableData.filter((nItem) => {
          return nItem.id === this.tableData[index].id;
        });
        if (arr.length) {
          arr = [];
          continue;
        }
        id = this.tableData[index].id;
      }
      //个数
      countArr = this.tableData.filter((item) => {
        return item.id === id;
      });
      count = countArr.length;
      this.tableData.forEach((item, i) => {
        if (item.id === id) {
          this.tableData[i].rowSpan = count;
          this.newTableData.push(item);
          count = 0;
        }
      });
    }
  },
  methods: {
    //表头行
    tableRowClassName({ row, rowIndex }) {
      console.log(rowIndex);
      if (rowIndex === 0) {
        return "show-row";
      }
      return "";
    },

    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex % 2 === 0) {
        if (columnIndex === 0) {
          return [1, 2];
        } else if (columnIndex === 1) {
          return [0, 0];
        }
      }
    },

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // column.rowSpan = row.rowSpan;
      // console.log(row.rowSpan, column.rowSpan);
      // console.log(row, column, rowIndex, columnIndex);

      if (columnIndex < 2) {
        if (row.rowSpan !== 0) {
          return {
            rowspan: row.rowSpan,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
  },
};
</script>
<style scoped>
.el-table /deep/ .show-row th {
  background: #5c8ded;
  color: #fff;
}

.el-table >>> .show-row th {
  background: #5c8ded;
  color: #fff;
}
</style>